<template>
  <div style="height: 100%;display: grid;grid-template-rows: auto minmax(0, 1fr);">
    <div style="font-weight: bold;font-size: 18px;margin-bottom: 10px;">
      设备运行状态
    </div>
    <div class="device-state-table">
      <template v-if="deviceStateLogs != null">
        <div class="row header">
          <div>设备</div>
          <div>状态</div>
          <div>持续时间</div>
          <div>发生时间</div>
        </div>
        <div v-for="log in deviceStateLogs" class="row">
          <div>
            <span>{{ log.deviceName }}</span>
          </div>
          <div>
            <el-tag v-if="log.pstate === -1" type="danger" size="small">停机</el-tag>
            <el-tag v-else-if="log.pstate == 1" type="success" size="small">运行</el-tag>
            <el-tag v-else-if="log.pstate == 2" type="danger" size="small">告警</el-tag>
            <el-tag v-else type="warning" size="small">待机</el-tag>
          </div>
          <div>
            <span>
              {{ formatDuration(log.beginTime, log.endTime) }}</span>
          </div>
          <div>
            <span>
              {{ formatPastTime(log.createTime) }}</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import vueStateMixin from "@/utils/vue-state-mixin";

const moment = require('moment')
import request from '@/utils/request'
moment.locale('zh-cn')

export default {
  name: 'DeviceStateTable',
  mixins: [vueStateMixin],
  props: {
    deviceId: {
      type: Number,
      require: false
    }
  },
  data() {
    return {
      deviceStateLogs: null
    }
  },
  watch: {
    deviceId: {
      immediate: true,
      handler() {
        this.loadData()
      }
    }
  },
  created() {
    setInterval(() => {
      if(this.pageActivate) {
        this.loadData()
      }
    }, 5000)
  },
  methods: {
    loadData() {
      request({
        url: '/api/datalog/loadDeviceStateLog',
        params: {
          deviceId: this.deviceId
        }
      }).then(resp => {
        if (resp.success) {
          this.deviceStateLogs = resp.data
        } else {
          this.$message.error(resp.message)
        }
      })
    },
    formatDuration(beginTime, endTime) {
      if (endTime == null) {
        endTime = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      }
      return moment(beginTime, 'YYYY-MM-DD HH:mm:ss').from(moment(endTime, 'YYYY-MM-DD HH:mm:ss'), true)
    },
    formatPastTime(time) {
      return moment(time, 'YYYY-MM-DD HH:mm:ss').format('M月D日H时m分')
    }
  }
}
</script>

<style scoped lang="scss">
.device-state-table {
  --border-color: #4D4E69;

  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  height: 100%;
  width: 95%;
  margin: auto;
  font-size: 14px;
  border: 1px solid var(--border-color);
  border-bottom-width: 0;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.8);
  position: relative;

  .row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 3fr);
    border-bottom: 1px solid var(--border-color);

    &.header {
      font-weight: bold;
    }

    &>div {
      position: relative;
      width: 100%;
      height: 100%;
      display: grid;
      justify-content: center;
      align-items: center;

      span {
        text-overflow:ellipsis;
        overflow:hidden;
        white-space:nowrap;
      }

      &::after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        width: 1px;
        height: 100%;
        background-color: var(--border-color);
      }
      &:first-child::after {
        visibility: hidden;
      }
    }
  }

  &::after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
  }
}
</style>
